<template>
  <view class="mescroll-view">
    <mescroll-uni
      ref="mescrollRef"
      :fixed="false"
      @init="mescrollInit"
      @down="downCallback"
      @up="upCallback"
      :down="downOption"
      :up="upOption"
    >
      <slot></slot>
    </mescroll-uni>
  </view>
</template>

<script>
import MescrollMixin from "mescroll-uni/mescroll-mixins.js";
import MescrollUni from "mescroll-uni/mescroll-uni.vue";
export default {
  name: "mescroll-view",
  mixins: [MescrollMixin],
  components: { MescrollUni },
  data() {
    return {
      upOption: {
        textNoMore: "没有更多数据",
      },
      downOption: {
        auto: false,
      },
    };
  },
  methods: {
    downCallback() {
      console.log("下拉刷新");
      this.mescroll.resetUpScroll();
      setTimeout(() => {
        this.taskList = 10;
        this.mescroll.endByPage(10, Math.ceil(20 / 10));
      }, 1000);
    },
    upCallback(page) {
      console.log("上拉刷新", page.num);
      this.page = page.num;
      setTimeout(() => {
        this.taskList = this.page * 10;
        this.mescroll.endByPage(10, Math.ceil(20 / 10));
      }, 2000);
    },
  },
};
</script>

<style lang="scss" scoped>
.mescroll-view {
  width: 100%;
  height: 100%;
}
</style>